<template>
  <view class="detail-container">
    <!-- 共享背景图 -->
    <image 
      class="background-img"
      src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/information_bg.png"
      mode="aspectFill"
    ></image>

    <scroll-view class="detail-scroll" scroll-y>
      <!-- 标题区域 -->
      <view class="header">
        <text class="title">{{ detailData.title }}</text>
        <image class="main-img" :src="detailData.img" mode="widthFix"></image>
      </view>

      <!-- 内容区域 -->
      <view class="content-box">
        <text class="content-text">{{ detailData.detail }}</text>
      </view>

      <!-- 返回按钮 -->
      <!-- <view class="back-btn" @tap="navigateBack">返回列表</view> -->
    </scroll-view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      detailData: {}
    }
  },
  onLoad(options) {
    const id = parseInt(options.id)
	uniCloud.callFunction({
	    name: 'getNewsDetail',
	    data: {
	        id
	    },
	    success: res => {
	        if (res.result.success) {
				this.detailData = res.result.data[0]
	            console.log('获取数据成功', res.result.data[0]);
	        } else {
	            console.error('获取数据失败', res.result.message);
	        }
	    },
	    fail: err => {
	        console.error('调用云函数失败', err);
	    }
	});
    
  },
  methods: {
    navigateBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped>
.detail-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.background-img {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
}

.detail-scroll {
  position: relative;
  z-index: 1;
  height: 100vh;
  padding: 10rpx;
}

.header {
  margin-bottom: 40rpx;
}

.title {
  display: block;
  font-size: 40rpx;
  color: #333;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 30rpx;
}

.main-img {
  width: 98%;
  border-radius: 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.1);
}

.content-box {
  background: rgba(255, 248, 240, 0.9);
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 100rpx;
}

.content-text {
  font-size: 30rpx;
  color: #666;
  line-height: 1.8;
  text-align: justify;
}

.back-btn {
  position: fixed;
  bottom: 60rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 240rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background: #8B4513;
  color: #fff;
  border-radius: 40rpx;
  font-size: 32rpx;
  box-shadow: 0 8rpx 24rpx rgba(139, 69, 19, 0.3);
}
</style>